<template>
  <a-spin :spinning="loading"
          :tip="tip"
          size="large"
          class="spin-box"
          :indicator="indicator">
    <slot />
  </a-spin>
</template>

<script setup>
import {h} from "vue";
import {LoadingOutlined} from "@ant-design/icons-vue";

/**
 * Props
 */
const props = defineProps({
  loading: {
    type: Boolean,
    required: true,
    default: false
  },
  tip: {
    type: String,
    required: false,
    default: '加载中'
  }
})

/**
 * 加载中自定义
 */
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '36px'
  },
  spin: true
})
</script>

<style scoped>
.spin-box {
  padding: 40px 0;
}
</style>